<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view class="grace-body" slot="gBody">
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
			 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
				<view style="text-align:right;">
					<text class="grace-text grace-blue" style="margin-right:25rpx;" @tap="goAdd">+ 添加新地址 </text>
				</view>
				<graceEmpty v-if="list == 'empty'">
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">本栏目暂无数据</text>
				</graceEmpty>
				<view class="grace-list grace-margin-top">
					<view class="grace-border-b" v-for="(item, index) in list" :key="index" v-if="list != 'empty'">
						<view class="grace-list-items">
							<view class="grace-list-body">
								<view class="grace-list-title">
									<text class="grace-list-title-text">{{item.name}}</text>
								</view>
								<view class="grace-list-body-desc">{{item.mobile}}</view>
								<view class="grace-list-body-desc">{{item.detail}}</view>
							</view>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right" @tap="selectAddress(item)"></text>
						</view>
						<!-- 订单底部 -->
						<view class="grace-order-footer grace-nowrap grace-flex-end">
							<view class="grace-nowrap grace-center" @tap="goAdd(item)">
								<image class="ur-foot-image" src="../../static/icon/pencel.png"></image>
								<text style="padding: 0 10rpx;">编辑</text>
							</view>
							<view class="grace-nowrap grace-center" style="margin: 0 20rpx;" @tap="delAddress">
								<image class="ur-foot-image" src="../../static/icon/recycle.png"></image>
								<text style="padding: 0 10rpx;">删除</text>
							</view>
						</view>
					</view>
				</view>
				<graceLoading :loadingType="loadingTypes"></graceLoading>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	var page = 1;
	export default {
		data() {
			return {
				mainHeight: 600,
				// 每个选项卡对应的分页
				// 加载状态
				// 每个滚动区域的滚动值
				scrollTops: 1,
				loadingTypes: 3,
				list: [],
			}
		},
		onLoad: function() {
			this.paginate();
		},
		methods: {
			//查询反馈意见
			async paginate(isReload) {
				let list = await this.$apis.listAddress();
				list = [
					{
					    id:1,
						name:'掌灸',
						mobile:'18977881111',
						province:1,
						city:1,
						area:1,
						is_default:false,
						tag:'家',
						detail:'天津三元里10号'
					},
					{
					    id:2,
						name:'掌灸2',
						mobile:'18977881115',
						province:1,
						city:1,
						area:1,
						is_default:false,
						tag:'公司',
						detail:'天津三元里10号'
					},
				];
				if (list.length > 0) {
					// 第一页
					if (page == 1) {
						this.list = list;
					}
					// 之后的加载页
					else {
						this.list = this.list.concat(list);
					}
					// 页码增加
					page++;
					setTimeout(() => {
						this.loadingTypes = 3;
					}, 300)
				} else if (this.list.length == 0) {
					console.log('empty');
					this.list = 'empty';
					this.loadingTypes = 4;
				} else {
					console.log('nomore');
					this.loadingTypes = 2;
				}
				if (isReload) {
					setTimeout(() => {
						this.$refs.graceReload.endReload();
					}, 300)
				}
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes == 2 || this.loadingTypes == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchmove(touchObj);

			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				page = 1;
				this.loadingTypes = 3;
				this.paginate(1);
			},
			goAdd: function(data) {
				if( data ){
					this.$mRouter.push({
						route: this.$mRoutesConfig.addAddress,
						query:data
					})
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.addAddress
					})
				}				
			},
			//选择收货地址
			selectAddress: function(data) {
				this.$eventHub.$emit('fireSelectAddress',data);
				//关闭当前窗口
				uni.navigateBack({});
			},
			//删除地址
			async delAddress(data) {
				let id = data.id;
				let ret = await this.$apis.delAddress({id:id});
				uni.showToast({
					title: "删除成功!",
					icon: "none"
				});
			},
			//打开报名详情
			goDetail: function(id) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.signup,
					query: {
						id: id
					}
				})
			}
		},
		components: {
			gracePage,
			graceFlex,
			graceEmpty,
			graceLoading,
			graceReload,
		}
	}
</script>
<style>
	.grace-news-btn {
		display: block;
		line-height: 32rpx;
		font-size: 26rpx;
		width: 160rpx;
		padding-left: -30rpx;
	}

	.grace-news-img {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		font-size: 0;
	}

	.grace-news-img-in {
		width: 100%;
	}

	.grace-news-imgs-img {
		width: 225rpx;
		height: 380rpx;
	}

	.ur-date-name {
		padding: 20rpx 0;
		width: 500rpx;
	}

	.grace-order-footer {
		margin: 5rpx 0;
	}

	.grace-order-number {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
	}

	.grace-order-status {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
		text-align: center;
	}
    .ur-foot-image{
		width:30rpx;
		height: 30rpx;
		margin: 5rpx 0;
	}
	.grace-order-btn {
		display: block;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999999;
		font-size: 22rpx;
		text-align: center;
		border-radius: 60rpx;
		border: 1px solid #999999;
		margin-left: 20rpx;
	}

	.grace-order-btn-red {
		border-color: #FF0036;
		color: #FF0036;
	}
</style>
